<div class="layout-horizontal">
  <div class="layout-flex left">
    <div class="name form-group">
      <label>Name</label>
      <input type="text" class="form-control" placeholder="Enter name" data-toggle="tooltip" title="Name of VPN server" value="<%- name %>" autofocus>
    </div>
    <div class="port-protocol form-group">
      <label>Port</label>
      <label>Protocol</label>
      <br>
      <input type="text" class="port form-control" placeholder="Enter port number" data-toggle="tooltip" title="Port number for VPN connections" value="<%- port %>" autocapitalize="off">
      <select class="protocol form-control" data-toggle="tooltip" title="Protocol for VPN connections">
        <option value="udp" <%= protocol === 'udp' ? 'selected' : '' %>>udp</option>
        <option value="tcp" <%= protocol === 'tcp' ? 'selected' : '' %>>tcp</option>
      </select>
    </div>
    <div class="port-wg form-group" <%= wg ? '' : 'style="display: none;"' %>>
      <label>WG Port</label>
      <input type="text" class="form-control" placeholder="Enter wg port number" data-toggle="tooltip" title="Port number for WG connections" value="<%- port_wg %>" autocapitalize="off">
    </div>
    <div class="form-group groups">
      <label>Groups</label>
      <div class="groups-label" data-toggle="tooltip" title="Enter list of groups to allow connections from. Names are case sensitive. If empty all groups will able to connect">
        <input type="text" placeholder="Enter groups" value="<%- groups ? groups.join(',') : '' %>">
      </div>
    </div>
    <div class="ipv6-toggle toggle-form form-group">
      <label>Enable IPv6</label>
      <div class="selector <%= ipv6 ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Enable IPv6 on server, requires IPv6 network interface">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="dns-servers form-group">
      <label>DNS Server</label>
      <input type="text" class="form-control" placeholder="Enter DNS server. Separate multiple DNS servers by a comma. Leave blank to use clients existing DNS servers" data-toggle="tooltip" title="Optional, DNS server for clients" value="<%- dns_servers.join(', ') %>" autocapitalize="off">
    </div>
    <div class="network form-group">
      <label>Virtual Network</label>
      <span class="label label-default no-select" toggle="tooltip" title="Maximum number of users for this subnet"></span>
      <input type="text" class="form-control" placeholder="Enter network address" data-toggle="tooltip" title="Network address for the private network that will be created for clients. This network cannot conflict with any existing local networks" value="<%- network %>" autocapitalize="off">
    </div>
    <div class="network-wg form-group" <%= wg ? '' : 'style="display: none;"' %>>
      <label>Virtual WG Network</label>
      <span class="label label-default no-select" toggle="tooltip" title="Maximum number of users for this subnet"></span>
      <input type="text" class="form-control" placeholder="Enter WG network address" data-toggle="tooltip" title="WG Network address for the private network that will be created for clients. Must have the same CIDR as virtual network. This network cannot conflict with any existing local networks" value="<%- network_wg %>" autocapitalize="off">
    </div>
    <div class="wg-toggle toggle-form form-group">
      <label>Enable WireGuard</label>
      <div class="selector <%= wg ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Enable WG connections on server. WireGuard packages must be installed separately">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="otp-auth-toggle toggle-form form-group">
      <label>Enable Google Authenticator</label>
      <div class="selector <%= otp_auth ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Enable two-step authentication using Google Authenticator. Verification code is entered as the user password when connecting">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="ipv6-toggle toggle-form form-group">
      <label>Enable IPv6</label>
      <div class="selector <%= ipv6 ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Enable IPv6 on server, requires IPv6 network interface">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
  </div>
</div>
<div class="layout-horizontal">
  <div class="layout-flex left advanced">
    <div class="dh-param-bits form-group">
      <label>DH Param Bits</label>
      <select class="form-control" data-toggle="tooltip" title="Size of DH parameters">
        <option value="1024" <%= dh_param_bits === 1024 ? 'selected' : '' %>>1024</option>
        <option value="1536" <%= dh_param_bits === 1536 ? 'selected' : '' %>>1536</option>
        <option value="2048" <%= dh_param_bits === 2048 ? 'selected' : '' %>>2048</option>
        <option value="3072" <%= dh_param_bits === 3072 ? 'selected' : '' %>>3072</option>
        <option value="4096" <%= dh_param_bits === 4096 ? 'selected' : '' %>>4096</option>
      </select>
    </div>
    <div class="cipher form-group">
      <label>Encryption Cipher</label>
      <select class="form-control" data-toggle="tooltip" title="Encryption cipher used for VPN traffic. AES 128bit is recommended for best bandwidth. Using AES 256bit will impact bandwidth. AES ciphers will use GCM when available">
        <option value="none" <%= cipher === 'none' ? 'selected' : '' %>>None</option>
        <option value="bf128" <%= cipher === 'bf128' ? 'selected' : '' %>>Blowfish 128bit</option>
        <option value="bf256" <%= cipher === 'bf256' ? 'selected' : '' %>>Blowfish 256bit</option>
        <option value="aes128" <%= cipher === 'aes128' ? 'selected' : '' %>>AES 128bit</option>
        <option value="aes192" <%= cipher === 'aes192' ? 'selected' : '' %>>AES 192bit</option>
        <option value="aes256" <%= cipher === 'aes256' ? 'selected' : '' %>>AES 256bit</option>
      </select>
    </div>
    <div class="ping-interval form-group">
      <label>Ping Interval</label>
      <input type="number" class="form-control" placeholder="Enter ping interval" data-toggle="tooltip" title="Optional, interval to ping client" value="<%- ping_interval || '' %>" min="0" autocapitalize="off">
    </div>
    <div class="link-ping-interval form-group">
      <label>User Link Ping Interval</label>
      <input type="number" class="form-control" placeholder="Enter ping interval" data-toggle="tooltip"
        title="Optional, time in between pings used when multiple users have the same network link to failover to another user when one network link fails."
        value="<%- link_ping_interval || '' %>" min="0" step="0.1"
        autocapitalize="off">
    </div>
    <div class="inactive-timeout form-group">
      <label>User Inactive Timeout</label>
      <input type="number" class="form-control" placeholder="Enter inactive timeout" data-toggle="tooltip" title="Optional, disconnect users after the specified number of seconds of inactivity." min="0" step="0.1" value="<%- inactive_timeout || '' %>" autocapitalize="off">
    </div>
    <div class="session-timeout form-group">
      <label>User Session Timeout</label>
      <input type="number" class="form-control" placeholder="Enter session timeout" data-toggle="tooltip" title="Optional, disconnect users after the specified number of seconds." min="0" step="0.1" value="<%- session_timeout || '' %>" autocapitalize="off">
    </div>
    <div class="max-clients form-group">
      <label>Max Clients</label>
      <input type="number" class="form-control" placeholder="Enter max clients" data-toggle="tooltip" title="Maximum number of clients connected to a server or to each server replica." min="0" value="<%- max_clients === -1 ? '' : max_clients %>" autocapitalize="off">
    </div>
    <div class="network-mode form-group">
      <label>Network Mode</label>
      <select class="form-control" data-toggle="tooltip" title="Network mode">
        <option value="tunnel" <%= network_mode === 'tunnel' ? 'selected' : '' %>>Tunnel</option>
        <option value="bridge" <%= network_mode === 'bridge' ? 'selected' : '' %>>Bridge</option>
      </select>
    </div>
    <div class="network-start form-group" <%= network_mode === 'bridge' ? '' : 'style="display: none;"' %>>
      <label>Network Start</label>
      <input type="text" class="form-control" placeholder="Enter start address" data-toggle="tooltip" title="Starting network address for the bridged VPN client IP addresses. Must be in the subnet of the server network" value="<%- network_start %>" autocapitalize="off">
    </div>
    <div class="mss-fix form-group">
      <label>MSS Fix</label>
      <input type="text" class="form-control" placeholder="Enter MSS fix" data-toggle="tooltip" title="Optional, MSS fix value" value="<%- mss_fix || '' %>" autocapitalize="off">
    </div>
    <div class="max-devices form-group">
      <label>Max Devices</label>
      <input type="number" class="form-control" placeholder="Enter max devices" data-toggle="tooltip" title="Maximum number of devices per client connected to a server." min="0" value="<%- max_devices === -1 ? '' : max_devices %>" autocapitalize="off">
    </div>
    <div class="pre-connect-msg form-group">
      <label>Pre-Connect Message</label><br>
      <textarea class="form-control" rows="6" spellcheck="false"><%- pre_connect_msg %></textarea>
    </div>
  </div>
  <div class="right advanced">
    <div class="bind-address form-group">
      <label>Bind Address</label>
      <input type="text" class="form-control" placeholder="Enter bind address" data-toggle="tooltip" title="Optional, local address to bind vpn server to. Leave empty to bind to all interfaces. Using a bind address disables IPv6 connections and prevents several features from being used. Only use when necessary" value="<%- bind_address || '' %>" autocapitalize="off">
    </div>
    <div class="hash form-group">
      <label>Hash Algorithm</label>
      <select class="form-control" data-toggle="tooltip" title="Authentication hashing algorithm">
        <option value="md5" <%= hash === 'md5' ? 'selected' : '' %>>MD5</option>
        <option value="sha1" <%= hash === 'sha1' ? 'selected' : '' %>>SHA-1</option>
        <option value="sha256" <%= hash === 'sha256' ? 'selected' : '' %>>SHA-256</option>
        <option value="sha512" <%= hash === 'sha512' ? 'selected' : '' %>>SHA-512</option>
      </select>
    </div>
    <div class="ping-timeout form-group">
      <label>Ping Timeout</label>
      <input type="number" class="form-control" placeholder="Enter ping timeout" data-toggle="tooltip" title="Optional, timeout for client ping. Must be greater then ping interval" min="0" value="<%- ping_timeout || '' %>" autocapitalize="off">
    </div>
    <div class="link-ping-timeout form-group">
      <label>User Link Ping Timeout</label>
      <input type="number" class="form-control" placeholder="Enter ping timeout" data-toggle="tooltip" title="Optional, ping timeout used when multiple users have the same network link to failover to another user when one network link fails." min="0" step="0.1" value="<%- link_ping_timeout || '' %>" autocapitalize="off">
    </div>
    <div class="allowed-devices form-group">
      <label>Allowed Devices</label>
      <select class="form-control" data-toggle="tooltip" title="Device types permitted to connect to server.">
        <option value="any" <%= !allowed_devices ? 'selected' : '' %>>Any</option>
        <option value="mobile" <%= allowed_devices === 'mobile' ? 'selected' : '' %>>Mobile</option>
        <option value="desktop" <%= allowed_devices === 'desktop' ? 'selected' : '' %>>Desktop</option>
      </select>
    </div>
    <div class="search-domain form-group">
      <label>DNS Search Domain</label>
      <input type="text" class="form-control" placeholder="Enter DNS search domain" data-toggle="tooltip" title="Optional, DNS search domain for clients. Separate multiple search domains by a comma" value="<%- search_domain || '' %>" autocapitalize="off">
    </div>
    <div class="replica-count form-group">
      <label>Replication Count</label>
      <input type="number" class="form-control" placeholder="Enter replication count" data-toggle="tooltip" title="Replicate server accross multiple hosts." value="<%- replica_count === -1 ? '' : replica_count %>" min="1" autocapitalize="off">
    </div>
    <div class="network-end form-group" <%= network_mode === 'bridge' ? '' : 'style="display: none;"' %>>
      <label>Network End</label>
      <input type="text" class="form-control" placeholder="Enter end address" data-toggle="tooltip" title="Ending network address for the bridged VPN client IP addresses. Must be in the subnet of the server network" value="<%- network_end %>" autocapitalize="off">
    </div>
    <div class="multi-device-toggle toggle-form form-group">
      <label>Allow Multiple Devices</label>
      <div class="selector <%= multi_device ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Allow users to connect with multiple devices concurrently">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="debug-toggle toggle-form form-group">
      <label>Enable Debugging Output</label>
      <div class="selector <%= debug ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Show server debugging information in output">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="restrict-routes-toggle toggle-form form-group">
      <label>Restrict Routing</label>
      <div class="selector <%= restrict_routes ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Prevent traffic from networks not specified in the servers routes from being tunneled over the vpn">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="block-outside-dns-toggle toggle-form form-group">
      <label>Block Outside DNS</label>
      <div class="selector <%= block_outside_dns ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Block outside DNS on Windows clients">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="dns-mapping-toggle toggle-form form-group">
      <label>Enable VPN Client DNS Mapping</label>
      <div class="selector <%= dns_mapping ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Map the vpn clients ip address to the .vpn domain such as example_user.example_org.vpn This will conflict with the DNS port if systemd-resolve is running">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="inter-client-toggle toggle-form form-group">
      <label>Inter-Client Routing</label>
      <div class="selector <%= inter_client ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Enable inter-client routing across hosts">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="vxlan-toggle toggle-form form-group">
      <label>VXLan Routing</label>
      <div class="selector <%= vxlan ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Use VXLan for routing client-to-client traffic with replicated servers">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
    <div class="ipv6-firewall-toggle toggle-form form-group" <%= ipv6 ? '' : 'style="display: none;"' %>>
      <label>Routed IPv6 Firewall</label>
      <div class="selector <%= ipv6_firewall ? 'selected' : '' %> no-select" data-toggle="tooltip" title="Enabled firewall when routed IPv6 is used">
        <span class="selector-inner glyphicon glyphicon-ok"></span>
      </div>
    </div>
  </div>
</div>
